<template>
  <el-aside :class="[{ iswidth: collapse }, 'el-menu-vertical-demo']">
    <el-menu
      :class="[{ iswidth: collapse }, 'el-menu-vertical-demo']"
      @open="handleOpen"
      @close="handleClose"
      router
      :unique-opened="uniqueOpened"
      :collapse="collapse"
      :collapse-transition="isTransition"
      :default-active="activeMenu"
    >
      <template v-for="(item, index) of menuList">
        <el-submenu
          :index="index + 1 + ''"
          v-if="item.child"
          :key="index"
          @click.native="getItemMenu(item.name)"
        >
          <template slot="title">
            <i :class="item.icon"></i>&nbsp;
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(each, number) of item.child"
            :key="number"
            v-if="each.menuSource == 'EXTERNAL'"
            @click="addTab(each)"
            ><a :href="each.url" target="_blank" class="externalLink">{{
              each.name
            }}</a></el-menu-item
          >
          <el-menu-item
            :index="each.url"
            v-for="(each, number) of item.child"
            :key="number"
            @click="addTab(each)"
            v-if="each.menuSource != 'EXTERNAL'"
          >
            <span slot="title" v-if="each.name == '考核自评'"
              ><el-badge
                :value="$store.state.selfEvaluateNumber"
                :max="99"
                :hidden="$store.state.selfEvaluateNumber == 0 ? true : false"
              ></el-badge
            ></span>
            <span slot="title" v-else-if="each.name == '考核评定'"
              ><el-badge
                :value="$store.state.assessEvaluateNumber"
                :max="99"
                :hidden="$store.state.assessEvaluateNumber == 0 ? true : false"
              ></el-badge
            ></span>
            <span slot="title">{{ each.name }}</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item
          :index="item.url"
          v-else-if="!item.child"
          :key="index"
          @click="addTab(item)"
        >
          <i :class="item.icon"></i>&nbsp;
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  data() {
    return {
      uniqueOpened: true,
      index: 0,
      routeName: '',
      urlList: [],
      isTransition: false,
      logoTitlePng: this.$store.state.areaInfoArr.indexTopImg,
      logoPng: this.$store.state.areaInfoArr.mainTopImg,
      isShowArr: true,
      screenWidth: window.screen.width, // 屏幕宽
      screeHeight: window.screen.height,
    }
  },
  props: ['menuList'],
  created() {},
  mounted() {
    if (this.screenWidth <= 1280) {
      const collapse = true
      // bus.$emit('collapse', this.collapse);
      this.$store.commit('changeCollapse', collapse)
    } else {
      const collapse = false
      // bus.$emit('collapse', this.collapse);
      this.$store.commit('changeCollapse', collapse)
    }
  },
  computed: {
    comDefaultActive() {
      if (this.$store.getters.geteditableTabsValue == '/home') {
        return '/home'
      } else {
        return this.$route.path
      }
    },
    activeMenu() {
      return this.$store.getters.activeMenu
        ? this.$store.getters.activeMenu
        : '/home'
    },
    collapse() {
      return this.$store.state.collapse
    },
  },
  watch: {
    $route(to, from) {
      this.$store.commit('SET_KEEP_ALIVE', this.$route.name)
      this.$store.commit('set_active_index', this.$route.fullPath)
      //防止页面后退
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL)
      })
      // this.$refs.haha.activedDemo = to.path;
    },
  },
  methods: {
    // 分辨率1024隐藏菜单栏
    hideSidebar() {
      this.isShowArr = false
      this.collapse = true
      this.$store.commit('changeCollapse', this.collapse)
    },
    getItemMenu(name) {
      if (name == '政务助手') {
        this.getNum()
      }
    },
    getNum() {
      this.axios({
        method: 'post',
        url: 'api-gov/assess/expand/assessstat',
        data: {},
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$store.state.selfEvaluateNumber =
              response.data.result.selfEvaluateNumber
            this.$store.state.assessEvaluateNumber =
              response.data.result.assessEvaluateNumber
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    handleOpen(key) {},
    handleClose(key, keyPath) {},
    isOpen() {
      this.collapse = !this.collapse
      this.$store.commit('changeCollapse', this.collapse)
    },
    addTab(menu) {
      //如果为外链即点击li标签跳转，避免只作用于a 标签
      if (menu.menuSource === 'EXTERNAL') {
        window.open(menu.url)
      }
      if (this.$store.state.userType === 'MONITOR' && this.isCzUser()) {
        if (menu.url === '/home/chuhzhouChart/index') {
          localStorage.setItem('urlName', 'chuhzhouChart')
          this.$router.push('/home/chuhzhouChart/index')
          this.$store.state.activeMenu = '/home/chuhzhouChart/index'
        } else if (menu.url === '/home') {
          if (this.$store.state.judgeItemCode == 'company') {
            localStorage.setItem('urlName', 'constructMonitorHome')
            this.$router.push('/home/monitorPage/monitorHome')
            this.$store.state.activeMenu = '/home/monitorPage/monitorHome'
          } else if (this.$store.state.judgeItemCode == 'project') {
            localStorage.setItem('urlName', 'constructMonitorHome')
            this.$router.push('/home/monitorPage/constructMonitorHome')
            this.$store.state.activeMenu =
              '/home/monitorPage/constructMonitorHome'
          }
        }
      }
      if (menu.url) {
        this.$store.state.activeMenuName = menu.name
        delete menu.newName
        this.$store.state.activeMenu = menu.url
        this.$store.commit('ADD_SLIDER', menu)
      } else {
        this.$alert('该功能正在开发中，敬请期待！', '温馨提示', {
          confirmButtonText: '确定',
          callback: (action) => {},
        })
      }
    },
  },
}
</script>
<style scoped lang="less">
/* 侧边栏 */
.el-aside {
  width: 230px !important;
  display: block;
  position: absolute;
  left: 0;
  top: 64px;
  bottom: 0;
  z-index: 666;
  // background-color: #F5F7FA;
  background-color: #f3f3f3;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  .iswidth {
    width: 64px !important;
  }
  .el-menu {
    background: #f3f3f3;
    // box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    // padding-bottom: 60px;
    border-right: 0;
    width: 230px;
    z-index: 666;
    height: 100%;
    overflow-x: hidden;
    // height:100%;
    // 侧边栏标题为首页的样式
    .el-menu--inline > .el-menu-item {
      position: relative;
      color: #333;
      background: #e9e9e9;
      &:hover {
        background: #dcdfe2;
        color: #3189ea;
      }
    }
  }
  /deep/ .el-submenu__title {
    font-size: 14px;
    color: #333;
  }
  /deep/ .el-submenu__title:hover {
    background: #dcdfe2;
    color: #3189ea;
  }
  /deep/ .el-submenu__title:focus {
    background: #dcdfe2;
    color: #3189ea;
  }
  /deep/ .el-menu--inline {
    background: #3189ea;
  }
  /deep/ .el-submenu {
    .el-submenu__title {
      &:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        transition: height 0.8s;
      }
    }
  }
  /deep/ .el-badge {
    position: absolute;
    top: -5px;
    right: 90px;
  }
  /deep/ .is-opened {
    .el-submenu__title {
      &:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 3px;
        height: 56px;
        background: #009588;
        transition: height 0.8s;
      }
    }
  }
  /deep/ .el-menu--inline {
    .el-menu-item {
      color: #333;
      padding-left: 55px !important;
      &:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 4px;
        height: 40px;
        background: #265faa;
        -webkit-transition: height 0.8s;
      }
      &:hover {
        // &:before {
        //   content: "";
        //   display: block;
        //   position: absolute;
        //   left: 0;
        //   width: 4px;
        //   height: 40px;
        //   background: #265FAA;
        //   -webkit-transition: height 0.8s;
        // }
      }
    }
    .el-menu-item.is-active {
      color: #3189ea;
      background: #dcdfe2;
      // background-color: #303133 !important;
      //   &:before {
      //   content:"";
      //   display: block;
      //   position: absolute;
      //   top:22.5px;
      //   left:30px;
      //   width: 5px;
      //   height: 5px;
      //   border:1px solid #009588;
      //   background:#009588;
      //   border-radius: 50%;
      // }
    }
  }
  // /deep/ .is-active {
  //   background-color: #303133 !important;
  //     &:before {
  //     content:"";
  //     display: block;
  //     position: absolute;
  //     top:22.5px;
  //     left:20px;
  //     width: 5px;
  //     height: 5px;
  //    background:red;
  //     border-radius: 50%;
  //   }
  // }
  .isOpenArrBox {
    position: relative;
    .OpenArr {
      width: 180px;
      // border: 1px solid #fff;
      text-align: center;
      margin-left: 25px;
      height: 30px;
      line-height: 28px;
      border-radius: 5px;
      position: fixed;
      bottom: 0;
      color: #fff;
      background: #1e2b3a;
      margin-bottom: 24px;
    }
    .FoldArr {
      width: 30px;
      // border: 1px solid #fff;
      background: #1e2b3a;
      text-align: center;
      margin-left: 18px;
      height: 30px;
      line-height: 28px;
      border-radius: 5px;
      position: fixed;
      bottom: 24px;
      color: #fff;
    }
  }
  .logoBox {
    height: 64px;
    .logoTile {
      height: 64px;
      background: #009588;
      text-align: center;
      line-height: 63px;
      position: fixed;
      z-index: 5;
      width: 230px;
      div {
        font-size: 20px;
        color: #fff;
      }
      .logoImg {
        width: 30px;
        height: 30px;
        // margin-left: 15px;
        vertical-align: middle;
        // margin-bottom: 7.5px;
        position: absolute;
        top: 17px;
        left: 17px;
      }
    }
  }

  /deep/.el-submenu__title i {
    color: #265faa;
    font-size: 14px;
  }
  .el-menu-item.is-active {
    color: #265faa;
    background: #dcdfe2;
  }
  .el-menu-item.is-active span {
    color: #3189ea;
  }
}

.el-menu-item /deep/ .el-badge__content {
  line-height: 15px;
}

.externalLink {
  color: #fff;
  vertical-align: middle;
}
/deep/ .el-submenu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/ .el-submenu__title {
  height: 48px !important;
  line-height: 48px !important;
}
/deep/ .el-menu-item,
.el-submenu__title {
  height: 48px !important;
  line-height: 48px !important;
  font-size: 14px;
  //  background-color:#DCDFE2;
}
/deep/ .el-menu-item:hover {
  background-color: #dcdfe2;
}

/deep/ .el-submenu__title:before {
  width: 0px !important;
}

/deep/ .el-menu--inline .is-active:before {
  border: 0px !important;
}

/deep/.theme_default .el-menu--inline .el-menu-item:hover:before,
/deep/.theme_default .el-menu--inline .is-active:before {
  border: 0px !important;
}
/deep/ .el-icon-arrow-down:before {
  color: #91959c;
}
</style>
